<template>
    <div class="governmentDetails-wrap">
        <div class="details-wrap">
            <image
                class="img"
                src="https://img2.baidu.com/it/u=3814762419,638738365&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                mode="scaleToFill"
            />
        </div>
        <div class="main-header">
            <div class="header-top">
                <span>政务单位名称</span>
                <div class="unit-box">
                    <image class="icon" :src="AddressIcon" mode="scaleToFill" />
                    <div>门店地址: 府城大道505号仁和新城负一楼</div>
                </div>
            </div>
            <div class="line"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import AddressIcon from '@/assets/address.png'
</script>
<style scoped lang="scss">
.governmentDetails-wrap {
    min-height: 100vh;
    width: 100%;
    background: #fff;
    position: relative;
    .details-wrap {
        height: 180px;
        // background: red;
        .img {
            width: 100%;
            height: 100%;
        }
    }
    .main-header {
        position: absolute;
        top: 160px;
        min-height: 100px;
        width: 100%;
        background: #fff;
        z-index: 10;
        // background: #eee;
        border-top-right-radius: 18px;
        border-top-left-radius: 18px;
        .header-top {
            padding: 10px;
            box-sizing: border-box;
            .unit-box {
                margin-top: 5px;
                display: flex;
                align-items: center;
                font-size: 12px;
                .icon {
                    width: 18px;
                    height: 18px;
                }
            }
        }
        .line {
            width: 100%;
            height: 1px;
            background: #eee;
        }
        // background: rebeccapurple;
    }
}
</style>
